<template>
  <el-dialog title="关系" v-model="visible" width="50%" :close-on-click-modal="false">
    <el-button type="primary" style="margin-bottom: 18px;" @click="add">添加关系</el-button>
    <el-table :data="tableData" border>
      <el-table-column label="关联" prop="correlation">
        <!-- <template #default="{ row }">
         
          {{ getCorrelation(row.correlation) }}
        </template> -->
      </el-table-column>
      <el-table-column prop="cardinal" label="本身基数" />
      <el-table-column prop="sideCardinal" label="对方基数" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="handleEditClick(row)">编辑</el-button>
          <el-button link type="danger" size="small" @click="handleDeleteClick(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="innerVisible" width="30%" :title="form.id ? '修改字段' : ' 添加字段'" append-to-body
      :close-on-click-modal="false">
      <el-form :model="form">
        <el-form-item label="关联">
          <el-select v-model="form.correlation" placeholder="关联" allow-create default-first-option>
            <el-option v-for="(item, index) in fatherTableList" :key="index" :label="item.label" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联">
          <el-select v-model="form.cardinal" placeholder="关联" allow-create default-first-option>
            <el-option label="1" value="1" />
            <el-option label="N" value="N" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联">
          <el-select v-model="form.sideCardinal" placeholder="关联" allow-create default-first-option>
            <el-option label="1" value="1" />
            <el-option label="N" value="N" />
          </el-select>
        </el-form-item>
      </el-form> <template #footer>
        <el-button @click="innerCancel">取消</el-button>
        <el-button type="primary" @click="innerConfirm">确定</el-button>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessageBox, ElMessage, } from "element-plus"
import { toRefs } from "vue"
import { useRelationship } from '@/store/relationship.ts';
import { storeToRefs } from "pinia"
import { ref, computed } from "vue";
import { useApp } from '@/store/app.ts'
const useAppStore = useApp()
const { treeData } = storeToRefs(useAppStore)
const useRelationshipStore = useRelationship()
const { tableData } = storeToRefs(useRelationshipStore)
const props = defineProps({
  visible: {
    type: Boolean,
    default: true,
  },
  id: {
    type: Boolean,
    default: true,
  }
})
const { visible, id } = toRefs(props)
const innerVisible = ref(false)
const form = ref({ correlation: '', cardinal: '', sideCardinal: '' })
const fatherTableList = computed(() => {
  if (treeData.value[0].children && treeData.value[0].children.length > 0) {
    [].find
    return treeData.value[0].children.filter((it: any) => it.id != id).map((its: any) => ({ id: its.id, label: its.label }))
  } else {
    return []
  }
})
// const getCorrelation = computed(() => (correlation: string) => fatherTableList.value.find((it: any) => it.id == correlation).label || '')
const add = () => {
  innerVisible.value = true
}
const handleEditClick = (row: any) => {
  form.value = { ...row }
  innerVisible.value = true
}
// 删除
const handleDeleteClick = (id: number | string) => {
  ElMessageBox.confirm('确定要删除吗', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    useRelationshipStore.delete(id)
  }).catch(() => {
    ElMessage.info('你取消了删除')
  })
}

const innerCancel = () => {

}
const innerConfirm = () => {

}
</script>

<style></style>